<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
    <!-- <script src="./axios.js"></script> -->
</head>

<body>
    <!-- 
        基础用法

        你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。
        它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。
        它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

        v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。
        你应该通过 JavaScript 在组件的 data 选项中声明初始值。

        v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

            text 和 textarea 元素使用 value 属性和 input 事件；
            checkbox 和 radio 使用 checked 属性和 change 事件；
            select 字段将 value 作为 prop 并将 change 作为事件。

        对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 v-model 不会在输入法组合文字过程中得到更新。
        如果你也想处理这个过程，请使用 input 事件。 
    -->
    <div id="demo">
        <!-- 单行文本 -->
        <input type="text" v-model="message" placeholder="输入表单">
        <p>表单输出： {{message}}</p>
    </div>

    <div id="demo2">
        <span>多行文本输出:</span>
        <p style="white-space:pre-line">{{message}}</p>
        <!-- 在文本区域插值 (<textarea>{{text}}</textarea>) 并不会生效，应用 v-model 来代替。 -->
        <textarea cols="30" rows="10" v-model="message" placeholder="多行文本输出"></textarea>
    </div>

    <div id="demo3">
        <!-- 
            复选框
            单个复选框，绑定到布尔值： 
        -->
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">单选框结果：{{checked}}</label>
    </div>

    <div id="demo4">
        <!-- 多个单选框绑定同一个数组 -->
        <input type="checkbox" id="jack" value="jack" v-model="checkName">
        <label for="jack">Jack</label>
        <input type="checkbox" id="john" value="john" v-model="checkName">
        <label for="john">john</label>
        <input type="checkbox" id="mike" value="mike" v-model="checkName">
        <label for="mike">Mike</label>
        <p>已选择的名字：{{checkName}}</p>
    </div>

    <div id="demo5">
        <!-- 单选框 -->
        <input type="radio" id="one" value="One" v-model="picked">
        <label for="one">One</label>
        <input type="radio" id="two" value="Two" v-model="picked">
        <label for="two">Two</label>
        <input type="radio" id="three" value="Three" v-model="picked">
        <label for="three">Three</label>
        <p>单选框结果：{{picked}}</p>
    </div>


    <div id="demo6">
        <!-- 
            如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。
            在 iOS 中，这会使用户无法选择第一个选项。
            因为这样的情况下，iOS 不会触发 change 事件。
            因此，更推荐像上面这样提供一个值为空的禁用选项。 
        -->
        <select v-model="selected">
            <option disabled>请选择</option>
            <option>AAAAA</option>
            <option>BBBBB</option>
            <option>CCCCC</option>
            <option>DDDDD</option>
            <option>EEEEE</option>
        </select>
        <span>Selected : <span v-if="selected == '请选择' ? false : true">{{selected}}</span></span>
    </div>

    <br>

    <div id="demo7">
        <!-- 多选框 ： multiple -->
        <select v-model="selected" multiple style="width: 70px;">
            <option disabled>请选择</option>
            <option>AAAAA</option>
            <option>BBBBB</option>
            <option>CCCCC</option>
            <option>DDDDD</option>
            <option>EEEEE</option>
        </select>
        <span>Selected : <span v-if="selected == '请选择' ? false : true">{{selected}}</span></span>
    </div>

    <br>

    <!-- 动态插入下拉框 -->
    <div id="demo8">
        <select v-model="selected">
            <option v-for="item of items" v-bind:value="item.value">{{item.text}}</option>
        </select>
        <span>Selected :{{selected}}</span>
    </div>

    <div id="demo9">
        <!-- 
            这里的 true-value 和 false-value 特性并不会影响输入控件的 value 特性，
            因为浏览器在提交表单时并不会包含未被选中的复选框。
            如果要确保表单中这两个值中的一个能够被提交，(比如“yes”或“no”)，请换用单选按钮。 
        -->
        <input type="checkbox" v-model="toggle" true-value="yes" false-value="no">
        <span>{{toggle}}</span>
    </div>

    <div id="app">
        <!-- 单选按钮 -->
        <!-- 当选中时 vm.pick === vm.a -->
        <input type="radio" v-model="pick" v-bind:value="abc">
        <input type="radio" v-model="pick" v-bind:value="a">
        <span>{{pick}}</span>
    </div>

    <div id="app2">
        <select v-model="selected">
            <option v-bind:value="{number : 123}">123</option>
        </select>
        <span>select : {{selected}} ---- {{selected.number}}</span>
    </div>

    <!-- ------------------------------------------------------------- -->
    <!-- -----------------------修饰符--------------------------------- -->
    <!-- ------------------------------------------------------------- -->

    <div id="app3">
        <!-- 
            .lazy
            
            在默认情况下，
            v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。
            你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步： 
        -->
        <!-- 在“change”时而非“input”时更新 -->
        <input v-model.lazy="msg">

        <!-- .number 如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符： -->

        <!-- 这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。
            如果这个值无法被 parseFloat() 解析，则会返回原始的值。 
        -->
        <input v-model.number="age" type="number">

        <!-- .trim 如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符： -->
        <input v-model.trim="msg2">
    </div>

    <script>
        new Vue({
            el: demo,
            data: {
                message: null
            }
        })

        new Vue({
            el: "#demo2",
            data: {
                message: null
            }
        })

        new Vue({
            el: "#demo3",
            data: {
                checked: null
            }
        })

        //注意：这里是复选框，必须传一个数组，否则会成为全选
        new Vue({
            el: "#demo4",
            data: {
                checkName: new Array
            }
        })

        new Vue({
            el: "#demo5",
            data: {
                picked: null
            }
        })

        new Vue({
            el: demo6,
            data: {
                selected: "请选择"
            }
        })

        new Vue({
            el: demo7,
            data: {
                selected: new Array
            }
        })

        new Vue({
            el: "#demo8",
            data: {
                selected: 'A',
                items: [{
                    text: 'One',
                    value: 'A'
                }, {
                    text: 'Two',
                    value: 'B'
                }, {
                    text: 'Three',
                    value: 'C'
                }]
            }
        })

        new Vue({
            el: demo9,
            data: {
                toggle: null
            }
        })

        new Vue({
            el: app,
            data: {
                a: "A",
                abc: "abc",
                pick: ""
            }
        })

        new Vue({
            el: app2,
            data: {
                selected: ''
            }
        })

        let vm = new Vue({
            el: app3,
            data: {
                msg: 'what??        ',
                age: "199",
                msg2: "zhende??          "
            }
        });

        vm.$watch("msg2", function(m, o) {
            console.log(m, "----", o)
        })
        vm.$watch("msg", function(m, o) {
            console.log(m, "----", o)
        })
        console.log(vm.msg)
        console.log(vm.age)
        console.log(vm.msg2.length)
    </script>
</body>

</html>